<template>
  <div id="shareWordList">
    <!-- 上部搜索条件 -->
    <topSearch
      v-if="streamStatus"
      :form-inline="formInline"
      @toSearch="toSearch"
      :streamStatus="streamStatus"
      :closeStatus="closeStatus"
    ></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      id="share-box"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      max-height="700"
      ref="table"
    >
      <el-table-column type="index" width="50" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="用户名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.nickName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="user.dpAccount" label="大鹏号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.dpAccount || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="verificationMobile" label="验证手机号" align="center">
        <template slot-scope="scope">
          <span style="width: 100%;">{{
            scope.row.verificationMobile || '-'
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="trueName" label="真实姓名" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.trueName || '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="duration" label="总开播时长" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.duration | formateTime() }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="watchCountUv" label="总观看人数" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.watchCountUv }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="fansCountByUser" label="总粉丝数" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.fansCountByUser }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="likeCount" label="总获赞数量" align="center">
      </el-table-column>
      <el-table-column
        prop="giftCount"
        label="总收获礼物数"
        align="center"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.giftCount || '-' }}</span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>
<script>
import topSearch from '@/components/anchor/anchorRankingList/topSearch' // 上部搜索条件
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getAnchorDetail,
} from '@/api/anchor/anchor-list'
export default {
  name: 'anchorListManage',
  msg: '主播列表管理-列表页',
  mixins: [saveScrollMixins],
  components: {
    topSearch
  },
  data() {
    return {
      rejectReasonData: null,
      rejectReasonVisible: false,
      fileList: new Array(),
      closeForm: {
        closeMemo: '',
        closePic: '',
        id: ''
      },
      dialogFormVisible: false,
      loading: true,
      total: 0,
      // 搜索条件
      formInline: {
        dpAccount: '', // 大鹏号
        orderType: 'DESC', // 排序类型
        sortField: 'DURATION', // 排序字段
      },
      // 表格数据
      tableData: [],
      // 分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 传递给新增弹框的数据
      addDialogData: {
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 传递给导入弹框的数据
      importDialogData: {
        title: '创建分享语管理',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      // 选择框选中的数据
      multipleSelection: [],
      // 认证状态列表
      streamStatus: [],
      closeStatus: [],
      hideBool: '',
      liveTypes: [],
      editLiveTypeDialogVisible: false,
      liveType: {
        id: '',
        value: ''
      }
    }
  },
  filters:{
   formateTime(time) {
      const h = parseInt(time / 3600)
      const minute = parseInt(time / 60 % 60)
      const second = Math.ceil(time % 60)    
      const hours = h < 10 ? '0' + h : h
      const formatSecond = second > 59 ? 59 : second
      return `${hours > 0 ? `${hours}:` : ''}${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    close() {
      this.closeForm.closeMemo = ''
      this.fileList = []
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign(this.searchParams, this.formInline)
      let params = obj
      getAnchorDetail(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* table选择 */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 新增后，刷新列表 */
    refresh() {
      this.formInline = {
        closeStatus: '',
        streamingStatus: '',
        collegeId: '',
        title: '',
        startTime: '',
        endTime: '',
        createTime: []
      }
      this.toSearch()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#shareWordList {
  .el-table {
    margin-top: 20px;
  }
}
.hide .el-upload--picture-card {
  display: none;
}
.el-upload-list__item,
.el-upload {
  margin-left: 10px !important;
}
</style>
